{% extends 'base.html' %}

{% block content %}
<style>

</style>
<div class="pagetitle">
  <ul class="breadcrumb">
    <li class="breadcrumb-item">个人信息</li>
    <li class="breadcrumb-item active">修改密码</li>
  </ul>
</div>
<section class="section dashboard">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">修改密码 <span id="error" style="color:red;margin-left: 27px;"></span></h5>

          <div class="activity">

            <form action="/app/changePassword/" method="POST" id="form">
              <div class="row mb-3">
                <label for="inputText" class="col-sm-2 col-form-label">原始密码</label>
                <div class="col-sm-10">
                  <input type="password" name="oldPassword" class="form-control" placeholder="请输入原始密码" id="oldPassword">
                </div>
              </div>
              <div class="row mb-3">
                <label for="inputText" class="col-sm-2 col-form-label">新密码</label>
                <div class="col-sm-10">
                  <input type="password" name="newPassword" class="form-control" placeholder="请输入新密码" id="newPassword">
                </div>
              </div>
              <div class="row mb-3">
                <label for="inputText" class="col-sm-2 col-form-label">新密码确认</label>
                <div class="col-sm-10">
                  <input type="password" name="newPasswordConfirm" class="form-control" placeholder="请再次输入新密码" id="newPasswordConfirm">
                </div>
              </div>
              <div class="row mb-3">
                <label for="inputText" class="col-sm-2 col-form-label"></label>
                <div class="col-sm-10">
                  <button type="submit" class="btn btn-primary">提交</button>
                </div>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block js %}
<script>
  $("#form").on("submit", function (e) {
    e.preventDefault();

    $.ajax({
      url: "/app/changePassword/",
      type: "POST",
      data: {
        oldPassword: $("#oldPassword").val(),
        newPassword: $("#newPassword").val(),
        newPasswordConfirm: $("#newPasswordConfirm").val(),
      },
      success: function (res) {
        $("#error").text(res.msg);
        if (res.status === "ok") {
          $("#oldPassword").val("")
          $("#newPassword").val("")
          $("#newPasswordConfirm").val("")
        }
      }
    });
  });
</script>
{% endblock %}